<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button class="editable-add-btn" style="margin-right: 16px" @click="handleAdd">添加</a-button>
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="onSelectedKeysButtonClick">
        选中
      </a-button>
      <span style="margin-left: 10px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="dataSource"
        :row-key="record => record.id"
        :pagination="pagination"
        bordered/>
  </div>
</template>

<script>
import {computed, defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
import apis from '../api/apis'

const columns = [{
  title: 'ID',
  dataIndex: 'id',
  key: 'id',
}, {
  title: '订单号',
  dataIndex: 'orderId',
  key: 'orderId',
}, {
  title: '金额',
  dataIndex: 'amount',
  key: 'amount',
}, {
  title: '创建日期',
  dataIndex: 'createTime',
  key: 'createTime',
}, {
  title: '订单状态',
  dataIndex: 'orderStatus',
  key: 'orderStatus',
  customRender: ({text}) => {
    return <div>{text}</div>;
  },
}];

export default defineComponent({
  name: "TableList",
  setup() {

    const state = reactive({
      selectedRowKeys: [],
      // Check here to configure the default column
      loading: false,
    });

    const hasSelected = computed(() => state.selectedRowKeys.length > 0);

    // 数据源
    const dataSource = ref([]);
    // 总记录数
    const total = ref(0);
    // 当前页码
    const currentPage = ref(1);
    // 每页记录数
    const pageSize = ref(10);
    // 分页器
    const pagination = computed(() => ({
      total: total.value,
      current: currentPage.value,
      pageSize: pageSize.value,
      showTotal: total => `总共 ${total} 项`,
      defaultPageSize: 10,
      pageSizeOptions: ['10', '20', '50', '100'], // 可不设置使用默认
      showSizeChanger: true, // 是否显示pageSize选择
      showQuickJumper: false, // 是否显示跳转窗
      // 页码变化
      onChange: pageNumber => {
        console.log('Change Page Number => ', pageNumber);
        currentPage.value = pageNumber;
      },
    }));

    const onSelectedKeysButtonClick = () => {
      state.loading = true;
      console.log("selected row keys => " + state.selectedRowKeys)
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };

    // 添加
    const handleAdd = () => {

    };

    //dom挂载后
    onMounted(() => {
      initTable();
    });

    function initTable() {
      apis.query_table_list({name: 'test'})
          .then((res) => {
            dataSource.value = res.payload;
            total.value = res.total ? res.total : 0;
            currentPage.value = res.pageIndex ? res.pageIndex : 1;
            pageSize.value = res.pageSize ? res.pageSize : 10;
          });
    }

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    return {
      dataSource,
      columns,
      hasSelected,
      ...toRefs(state),
      onSelectedKeysButtonClick,
      handleAdd,
      onSelectChange,
      pagination,
    };
  },

});
</script>

<style scoped>

</style>